<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js8.3作业1参考答案</title>
	</head>
	<body>
		<!--二级联动下拉菜单,第一级下拉菜单为年级。共3个年级：初一。初二。初三。	
			选择年级后第二级下拉菜单显示所选年级的班级。每个年级有三个班。
			例如一年级有一一班。一二班。一三班。二年级有二一班。二二班二三班。 \
			使用节点的增删改查完成这个作业-->
		
		年级:<select id="slcGrade"></select> 班级:<select id="slcClass"></select>
		<script type="text/javascript">
			
			var datas = [
				{
					name: "初一",
					classList:[
						{'name': '一一班', 'value': '1_1'},
						{'name': '一二班', 'value': '1_2'},
						{'name': '一三班', 'value': '1_3'},
					]
				},
				{
					name: "初二",
					classList: [
						{'name': '二一班', 'value': '2_1'},
						{'name': '二二班', 'value': '2_2'},
						{'name': '二三班', 'value': '2_3'},
					]
				},
				{
					name: "初三",
					classList: [
						{'name': '三一班', 'value': '1_1'},
						{'name': '三二班', 'value': '2_2'},
						{'name': '三三班', 'value': '3_3'},
					]
				}
			];
			
			var slcGrade = document.getElementById('slcGrade');
			var slcClass = document.getElementById('slcClass');
			// 创建请选择的option
			var baseOption = document.createElement('option');
			baseOption.value = '';
			baseOption.innerText = '请选择';
			
			// 初始化年级列表
			function initGrade(){
				slcGrade.appendChild(baseOption);
				for(var i=0; i<datas.length; i++){
					var gradeNode = document.createElement('option');
					// 把年级在数组中的索引当作节点的value
					gradeNode.value = i;
					gradeNode.innerText = datas[i].name;
					slcGrade.appendChild(gradeNode);
				} 
			}
			initGrade();
			
			// 年级列表选中时。把年级在数组中对应的索引传递给班级初始化函数
			slcGrade.onchange = function(){
				initClass(this.value);
			}
			
			// 初始化班级列表, 参数为年级在数组中的下标
			function initClass(gradeIndex){
				
				if(gradeIndex == ''){
					// 未选中则不作处理
					return;
				}
				// 由于option的value都是字符串。在当作下表使用前转为数字
				gradeIndex = parseInt(gradeIndex);
				var nowGrade = datas[gradeIndex];
				var classList = nowGrade.classList;
				var html = baseOption;
				
				// 若班级列表为空则说明是第一次选择年级
				if(slcClass.childNodes.length == 0){
					// 同一个节点不能同时用在两个地方.所以这里要重新声明一个元素节点
					var baseOption = document.createElement('option');
					baseOption.value = '';
					baseOption.innerText = '请选择';
					// 第一次选择年级把请选择的option加上
					slcClass.appendChild(baseOption);
				}
				else{
					// 遍历移除除了请选择之外的班级option
					while(slcClass.childNodes.length > 1){
						slcClass.lastChild.remove();
					}
				}
				
				//  遍历当前年级的班级列表.把班级option写入班级select的子节点下
				for(var i=0; i<classList.length; i++){
					var classNode = document.createElement('option');
					classNode.value = classList[i].value;
					classNode.innerText = classList[i].name;
					slcClass.appendChild(classNode);
				}
				
			}
			
			
			
		</script>
	</body>
</html>
